<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
		<link rel="stylesheet" type="text/css" href="css/advantage.css"/>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
        <!-- 头部 -->
        <header>
            <div class="header-in">
                <p>
                    <a href="">91人气APP(商家版)</a>
                </p>
                <ul>
                    <li>
                        <a href="../../html/login.html">登陆</a><span>-</span><a href="../../html/regist.html">注册</a>
                    </li>
                    <li><a href="../../yanlei/app/more.html">帮助中心</a></li>
                    <li><a href="qq.html">联系客服</a></li>
                </ul>
            </div>
        </header>
        <!-- 导航 -->
        <nav>
            <div class='nav-in'>
                <div class='nav-l'>
                    <img src="img/logo_03.png" alt="" />
                    <p class='logo-r'><img src="img/logo_06.png" alt="" /></p>
                </div>
                <div class='nav-r'>
                    <ul>
                        <li><a href="../../index.html" class='first'>首页</a></li>
                        <li>
                            <a href="" class='nav-lan'>优势<span><img src="img/hot.png" alt="" /></span></a>
                            <div class='xia'>
                                <span style='font-size:40px;' class='guan'>x</span>
                                <a href="advantage.html">独家优势</a>
                                <a href="../../91yxf/app/security.html">安全保障</a>
                                <a href="../../91yxf/app/exp.html">免费体验</a>
                                <span style='border-top:solid 1px gainsboro'>优势</span>
                            </div>
                        </li>
                        <li>
                            <a href="" class='nav-lan'>业务</a>
                            <div class='xia'>
                                <span style='font-size:40px;' class='guan'>x</span>
                                <a href="../../html/serviceProduct.html">产品业务</a>
                                <a href="../../html/serviceEffe.html">效果作用</a>
                                <span style='border-top:solid 1px gainsboro'>业务</span>
                            </div>
                        </li>
                        <li>
                            <a href="" class='nav-lan'>发现<span><img src="img/hot.png" alt="" /></span></a>
                            <div class='xia'>
                                <span style="font-size: 40px;" class='guan'>x</span>
                                <a href="../../fenye/app/vip.html">VIP中心</a>
                                <a href="../../fenye/app/active.html">常规活动</a>
                                <a href="../../html/activity.html">热门活动</a>
                                <a href="../../yanlei/app/more.html">公告</a>
                                <span style="border-top: 1px solid gainsboro;">发现</span>
                            </div>
                        </li>
                        <li>
                            <a href="" class='nav-lan'>更多</a>
                            <div class='xia'>
                                <span style="font-size: 40px;" class='guan'>x</span>
                                <a href="../../yanlei/app/more.html">商家指南</a>
                                <a href="../../html/AboutUs.html">关于我们</a>
                                <span style="border-top: 1px solid gainsboro;">更多</span>
                            </div>
                        </li>
                    </ul>
                    <p>
                        <a href="../../html/login.html" class='login'>登陆</a>
                        <a href="../../html/regist.html" class='zhuce'>注册</a>
                    </p>
                </div>
            </div>
        </nav>
		<div class="content">
			<div class="content-into">
				<h2>业内唯一提供商家申诉机制</h2>
				<p>任务审核通过后7天内，商家若检查出买家提供错误截图</p>
				<p>可点击申诉让小二进行核对，成功后退回账户。</p>
				<ul class="content-teb">
					<li class="teb-l">用户多重认证</li>
					<li class="teb-l">任务质量严格</li>
					<li class="teb-l">任务实时监控</li>
					<li class="teb-l">独家直通车</li>
					<li class="teb-l">运营实操分享</li>
					<li class="teb-r"></li>
					<li class="teb-r"></li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		       //导航
        $('.nav-lan').each(function(i) {
            $('.nav-lan').eq(i).on('click',function(e) {
                var e = e || window.event;
                e.preventDefault();
                $('.xia').eq(i).show().siblings().hide();
                $('.nav-lan').eq(i).show();
            })
        })
        //关闭隐藏div
        $('.guan').each(function(i) {
            $('.guan').eq(i).on('click',function() {
                $('.xia').eq(i).hide();
                console.log($('.xia').eq(i));
            })
        })
		$(function(){
			$.getJSON('data/advantage.json',function(res){
				$('.content-teb li').each(function(index){
					$('.content-teb li').eq(index).css({
						left:res[index]["position-l"],
						top:res[index]["position-t"],
						'background-image':'url(' + res[index].url + ')'
					});
					$(this).mouseenter(function(){
						initBg(res);
						$(this).css('background-image','url(' + res[index].changeUrl + ')');
					});
					$(this).click(function(){
						initBg(res);
						$(this).css('background-image','url(' + res[index].changeUrl + ')');
						$('.content-into h2').text(res[index].title);
						$('.content-into p:first').text(res[index].content1);
						$('.content-into p:last').text(res[index].content2);
					});
				});
			});
			function initBg(res){
				$('.content-teb li').each(function(i){
					$('.content-teb li').eq(i).css('background-image','url(' + res[i].url + ')');							
				});
			}
		});
	</script>
</html>
